<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { getHouseList, labelEnableList, useFlashShow } from '@fl/api/joint-api/flash-management'
import { Editor } from '@fl/origin-components/Editor/index'
import { cloneDeep } from 'lodash-es'

import { useDicts } from '../hooks/use-dicts'

const props = withDefaults(defineProps<{
    sortOptions?: any
}>(), {
    sortOptions: [],
})

const { sortOptions } = toRefs(props)

const { useDict } = useDicts()
const visible = defineModel<boolean>('visible', { required: true })
const id = defineModel<string>('id', { required: true })

const formRef = ref()
const title = ref('快讯详情')
const houseOptions = ref<any>([])
const editorConfig = ref<any>({ readOnly: true })
const labelOptions = ref<any>()
const detailLabelsList = ref<any>([])

const initialState = {
    adFloor: '', // 楼盘：拼接adFloorOne、adFloorTwo
    adFloorOne: '',
    adFloorTwo: '',
    choiceFlag: '0', // 是否精选：0-非精选 1-精选
    classifyName: '', // 分类
    collectNum: '',
    commentFlag: '0', // 开启评论：0-关闭 1-开启
    commentsNum: '',
    content: '', // 内容
    createBy: '', // 发布者
    createTime: '',
    forwardNum: '',
    hotFlag: '0', // 是否热点
    id: '',
    labels: [], // 标签
    newsTitle: '', // 标题
    originalFlag: '0', // 是否原创：0-非原创 1-原创
    statistic: '',
    titleImage: '', // 图片
    topFlag: '0', // 是否置顶
    topTime: '',
    upNum: '',
    urlAddress: '', // 链接地址
    viewNum: '',
}
const state = ref(cloneDeep(initialState))

// 详情
const { data: detail, isLoading } = useFlashShow(id)
watchEffect(() => {
    if (id.value && detail.value && houseOptions.value) {
        state.value = cloneDeep(detail.value)

        // 分类
        state.value.classifyName = sortOptions.value.reduce((pre: any, cur: any) => {
            if (cur.value === detail.value.classifyId) {
                pre = cur.classifyName
            }
            return pre
        }, '')

        // 标签
        getLabelEnableList(detail.value.classifyId)
        detailLabelsList.value = detail.value.labelsList // 暂存

        // 楼盘
        const str = houseOptions.value.reduce((pre: any, cur: any) => {
            if (detail.value.adFloorOne === cur.projectId) {
                pre += `${cur.projectName}、`
            }
            if (detail.value.adFloorTwo === cur.projectId) {
                pre += `${cur.projectName}、`
            }
            return pre
        }, '')
        state.value.adFloor = str.slice(0, str.length - 1)

        state.value.originalFlag = detail.value.originalFlag
        state.value.choiceFlag = detail.value.choiceFlag
        state.value.topTime = `${detail.value.topStartTime} 至 ${detail.value.topEndTime}`
    }
})

function getLabelEnableList(id: string) {
    const params = {
        classifyId: id,
    }
    labelEnableList(params).then((res: any) => {
        labelOptions.value = res.reduce((pre, cur) => {
            cur.value = cur.id
            cur.label = cur.labelName
            pre.push(cur)
            return pre
        }, [])

        // 处理详情标签回显
        if (detailLabelsList.value) {
            state.value.labels = detail.value.labelsList.reduce((pre: any, cur: any) => {
                // 去掉已隐藏的
                labelOptions.value.forEach((item) => {
                    if (item.value === cur.id) {
                        pre.push(cur.labelName)
                    }
                })
                return pre
            }, [])
        }
        else {
            state.value.labels = []
        }
    })
}

// 所有楼盘
async function getHouseOptions() {
    await new Promise((resolve) => {
        getHouseList({ pageNum: 1, pageSize: 500, projectName: '' }).then((res) => {
            houseOptions.value = res.rows
            resolve('')
        })
    })
}
getHouseOptions()

function cancel() {
    reset()
}

function reset() {
    id.value = ''
    state.value = cloneDeep(initialState)
    visible.value = false
    formRef.value.formInstance.resetFields()
}

const columns: PlusColumn[] = [
    {
        colProps: { span: 22 },
        label: '快讯ID',
        prop: 'id',
        valueType: 'text',
    },
    {
        colProps: { span: 22 },
        label: '标题',
        prop: 'newsTitle',
        valueType: 'text',
    },
    {
        colProps: { span: 22 },
        label: '定时发布时间',
        prop: 'createTime',
        valueType: 'text',
    },
    {
        colProps: { span: 12 },
        label: '是否精选',
        prop: 'choiceFlag',
    },
    {
        colProps: { span: 12 },
        label: '评论功能',
        prop: 'commentFlag',
    },
    {
        colProps: { span: 12 },
        label: '是否置顶',
        prop: 'topFlag',
    },
    {
        colProps: { span: 12 },
        label: '是否热点',
        prop: 'hotFlag',
    },
    {
        colProps: { span: 22 },
        hideInForm: computed(() => state.value.topFlag === '0'),
        label: '置顶时间',
        prop: 'topTime',
        valueType: 'text',
    },
    {
        colProps: { span: 22 },
        label: '数据统计',
        prop: 'statistic',
    },
    {
        colProps: { span: 22 },
        label: '快讯分类',
        prop: 'classifyName',
        valueType: 'text',
    },
    {
        colProps: { span: 22 },
        label: '快讯标签',
        prop: 'labels',
    },
    {
        label: '图片',
        prop: 'titleImage',
    },
    {
        colProps: { span: 22 },
        label: '发布者',
        prop: 'createBy',
        valueType: 'text',
    },
    {
        label: '是否原创',
        prop: 'originalFlag',
    },
    {
        colProps: { span: 22 },
        hideInForm: computed(() => state.value.originalFlag === '1'),
        label: '链接地址',
        prop: 'urlAddress',
        valueType: 'text',
    },
    {
        colProps: { span: 22 },
        hideInForm: computed(() => state.value.originalFlag === '0'),
        label: '快讯内容',
        prop: 'content',
    },
    {
        colProps: { span: 22 },
        label: '广告楼盘',
        prop: 'adFloor',
        valueType: 'text',
    },
]
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="800"
                close-on-press-escape
                :has-footer="false"
                :fullscreen="true"
                style="overflow:hidden"
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    animated
                    class="mt-20"
        />

        <template v-else>
            <div class="plusform mt-20">
                <PlusForm ref="formRef"
                          v-model="state"
                          :columns="columns"
                          :label-width="120"
                          :has-footer="false"
                          :row-props="{ gutter: 20 }"
                >
                    <template #plus-field-topFlag>
                        {{ useDict('IsOrNot', state.topFlag) }}
                    </template>

                    <template #plus-field-hotFlag>
                        {{ useDict('IsOrNot', state.hotFlag) }}
                    </template>

                    <template #plus-field-choiceFlag>
                        {{ useDict('IsOrNot', state.choiceFlag) }}
                    </template>

                    <template #plus-field-commentFlag>
                        {{ useDict('OpenOrClose', state.commentFlag) }}
                    </template>

                    <template #plus-field-statistic>
                        <div class="flex">
                            <el-text type="info">
                                浏览：{{ state.viewNum }}
                            </el-text>

                            <el-text type="primary">
                                点赞：{{ state.upNum }}
                            </el-text>

                            <el-text type="success">
                                评论：{{ state.commentsNum }}
                            </el-text>

                            <el-text type="warning">
                                收藏：{{ state.collectNum }}
                            </el-text>

                            <el-text type="danger">
                                转发：{{ state.forwardNum }}
                            </el-text>
                        </div>
                    </template>

                    <template #plus-field-labels>
                        <ElTag v-for="(item, index) in state.labels"
                               :key="index"
                               type="success"
                               class="mb5 mr10 mt5"
                        >
                            {{ item }}
                        </ElTag>
                    </template>

                    <template #plus-field-titleImage>
                        <el-image v-if="state.titleImage"
                                  class="img"
                                  :src="state.titleImage"
                                  :preview-src-list="[state.titleImage]"
                                  fit="contain"
                        />
                    </template>

                    <template #plus-field-originalFlag>
                        {{ useDict('OriginalType', state.originalFlag) }}
                    </template>

                    <template #plus-field-content>
                        <Editor v-model="state.content"
                                :is-jc-mall="false"
                                :height="300"
                                :editor-config="editorConfig"
                        />
                    </template>
                </plusform>
            </div>
        </template>
    </PlusDialog>
</template>

<style lang="scss" scoped>
.plusform {
    height: 76vh;
    overflow: hidden auto;
}
.img {
    width: 120px;
    height: 120px;
}
.flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
    opacity: 0.7;
}
:deep(.el-text.el-text--success) {
    color: #409eff;
}
</style>
